import React, { useEffect, useState } from 'react';
import Header from '@/components/Header/Header';
import UploadImage from '@/components/UploadImage/UploadImage';
import Rate from '@/components/Rate/Rate';
import { queryCommentDetail } from '@/services/order';
import { AsyncLoading } from '@/design';
import { isEmpty } from '@/utils/common';
import { history } from 'umi';
import styles from './comment.less';

export default function (props: any) {
  let unmount = false;
  const [commentInfo, setCommentInfo] = useState<any>({});
  const { orderId = '' } = props.match.params;
  useEffect(() => {
    fetchCommentDetail();
    return () => {
      unmount = true;
    }
  }, []);


  const fetchCommentDetail = async () => {
    if (isEmpty(orderId)) {
      return;
    };
    let result = await queryCommentDetail({ orderId })
    if (unmount || !result) return;
    setCommentInfo(result.data);
  }

  return <>
    {isEmpty(commentInfo) ? <AsyncLoading /> : <div className={styles.comment_wrap}>
      <Header hasBack title={'填寫評論'}></Header>
      <div className={styles.product_info}>
        <h3>菜品評價</h3>
        {(commentInfo.productCommentList || []).map((item: any, index: number) => {
          return <div key={`${item.productId}_${index}`}>
            <div className={styles.product} >
              <span>{item.productName}</span>
              <span>
                <i className={`${styles.like_icon_default} ${item.likeStatus === 1 ? styles.actived : ''}`} ></i>
                <i className={`${styles.like_icon} ${item.likeStatus === 0 ? styles.actived : ''}`} ></i>
              </span>
            </div>
            {item.likeStatus === 0 &&
              <div className={styles.input_wrap}>
                <textarea
                  className={styles.input}
                  maxLength={100}
                  rows={3}
                  defaultValue={item.unlikeContent}
                  disabled
                  placeholder='非常抱歉，我们做得还不够好，请告诉我们，我们会改善的噢~'
                ></textarea>
              </div>}
          </div>
        })}
      </div>
      <div className={styles.picture_wrap}>
        <h3>曬單</h3>
        <div className={styles.uplaod_wrap}>
          <UploadImage className={styles.upload} defaultValue={commentInfo.images} disabled />
        </div>
        <h3>訂單評價：<Rate num={commentInfo.star} /> </h3>
        <div className={styles.input_wrap}>
          <textarea
            className={styles.input}
            maxLength={140}
            rows={3}
            defaultValue={commentInfo.content}
            disabled
            placeholder='非常抱歉，我们做得还不够好，请告诉我们，我们会改善的噢~'
          ></textarea>
        </div>
      </div>
    </div>}

  </>

}